<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="zmCore-1.53.min.js"></script>
        <script>
            zm.ready(function (){
                zm("#choice-answer").change(function (){
                     var type=zm(this).val();
                     if(type =="0"){
                       zm(".content-answer").html('<div class="text-answer">Their answer</div>');
                     }
                     if(type =="1"){
                         zm(".content-answer").html('<div class="paragraph-answer">Their longer answer</div>');
                     }
                     if(type =="2" || type=="3"){
                         zm(".content-answer").html(' <div class="option"><input type="radio" name="0"  disabled=""><input type="text" size="50"/><button class="remove hide">X</button><br></div>'
                             +'<button class="add-option">Add Option</button>');
                        // and event for button add
                        zm(".add-option").bind("click",function (){
                             zm(".add-option").before('<div class="option"><input type="radio" name="0" disabled=""><input type="text" size="50"/><button class="remove">X</button><br></div>');
                            removeButton();
                            zm(".remove").unbindAll();
                            zm(".remove").bind("click",function (){
                             zm(this).parent().remove();
                             removeButton();
                         });
                        });
                         //and event for remove button
                         zm(".remove").bind("click",function (){
                             zm(this).parent().remove();
                         });
                      
                     }
                });
                 // done question
                 zm(".done-question").bind("click",function (){
                     zm(".form-question").addClass("boder-style");
                     var require= zm('input[name="require"]').attr("checked");
                     var title=zm('input[name="title"]').attr("value");
                     var help =zm('input[name="help-text"]').attr("value");
                     var type =zm('#choice-answer').val();
                     var question ='<div class="question-answer">';
                       question+='<div class="edit non-display"><button class="remove-answer " >X</button>';
                         question+='<button class="edit-answer" >Edit</button></div><p>'+title;
                     if(require === true){
                         question+= '<span>(*)</span></p>';
                     }
                     else{
                         question+='</p>';
                     }
                     
                      question  += '<p>'+help+'</p>';
                     if(type ==="0"){
                         question+='<div class="answer" typeanswer="0">';
                         question+='<input type="text" size="100"/>';
                     }
                     if(type ==="1"){
                           question+='<div class="answer" typeanswer="1">';
                            question+='<textarea cols="50" ></textarea>';
                           
                     }
                     if(type==="3"){
                         question+='<div class="answer" typeanswer="3">';         
                         zm(".option").each(function (){
                            var txt= zm(this).find('input[type="text"]').val();
                          question+='  <div class="answer-option">'
                             +'<input type="checkbox" ><span>'+txt+'</span>'
                            +'</div>';                            
                         });
                     }
                      if(type==="2"){
                         question+='<div class="answer" typeanswer="2">';
                            var name=getNameforRadiobox();    
                         zm(".option").each(function (){
                            var txt= zm(this).find('input[type="text"]').val();                           
                          question+='<div class="answer-option" >'
                             +'<input type="radio" name="'+name.toString()+'"><span>'+txt+'</span>'
                            +'</div>';                           
                         });
                        
                     }
                      question+='</div>';
                      question+='</div>';
                      
                      zm(".form-question").append(question);
                      zm(".question").hide();
                      zm('.remove-answer').unbindAll();
                      zm('.remove-answer').bind("click",function (){
                          zm(this).parent().parent().remove();
                      });
                     
                 });
                zm(".add-item").click(function (){
                    zm(".question").find("input").each(function (){
                        zm(this).val("");
                    });
                    zm(".question").show();
                }); 
                
            });
            
            
            function read(str){
                zm.get(str,success);
            }
            function success(data){
                 zm(".type-answer").html(data);
            }
            function getAnswerAndBuild(){
                
            }
            function removeButton(){
                var size=zm(".content-answer").children().size();
                            if(size==2){
                                zm(".remove").addClass("hide");
                            }
                            else{
                                zm(".remove").removeClass("hide");
                         }
            }
            function getNameforRadiobox(){
                var i =0;
                var exits=true;
                do{
                     i++;
                        exits=false;
                    zm('.answer-option input[type="radio"]').each(function(){
                             var name=zm(this).attr("name");
                             console.log("name"+name);
                            if( name!=="" &&i===zm.intval(name)  ){
                               exits =true;
                            }
                    });
                }while(exits===true);
                console.log("i:"+i);
            return i;
            }
        </script>
            
    </head>
    <body>
        <div class="wrap-page">
            <div class="header-form">
                <input type="text" size="150" value="Untitled form"/><br>
                <textarea cols="114" placeholder="Form Description"></textarea>
            </div>
            <div class="form-question">
                
                   
                    
              
                
            </div><!-- end form-question -->
              <div class="question"> <!-- start question -->
                <div class="header-question">
                    <table>
                        <tr>
                            <th><label>Question Title:</label></th>
                            <th><input type="text" size="100" name="title"/><br></th>
                        </tr>
                         <tr>
                            <th><label>Help Text:</label></th>
                            <th><input type="text" size="100" name="help-text"/><br></th>
                        </tr>
                    </table>
                </div><!-- end header-question -->
                <hr>
                <div class="select-question">
                    Questtion type:<select id="choice-answer">
                        <option selected value="0">Text</option>
                                <option value="1">Paragraph text</option>
                                <option value="2">Single Selection</option>
                                <option value="3" >Multi Choice</option>
                        </select>
                </div>
                <hr>
                <div class="content-answer ">
                        <div class="text-answer">Their answer</div>
                </div>
                 <hr>
                 <div class="footer-question">
                     <input type="checkbox" name="require"/>require<br>
                       <button class="done-question">Done</button>
                     
                 </div>
                 
            </div><!-- end question -->
            <div>
                <button class="add-item">Add Item</button>
            </div>     
        </div>
    </body>
</html>
